/**
 * Level3Navigator.jsx
 * 三级导航
 *
 * created by qiuwei
 * version 1.0.0
 * 2016年03月19日
 */

import React from 'react';
import cx from 'classnames';

import * as Level3NavigatorStyle from './Level3Navigator.less';

export default class Level3Navigator extends React.Component {
	static propTypes = {
		items: React.PropTypes.array,
	};

	constructor(props) {
		super(props);
	}

	handleViewChange = (view) => {
		let { onChange } = this.props;
		onChange && onChange(view);
	};

	render() {
		let { items = [], selectedItem } = this.props;
		let nodes = items.reduce((nodes, n, index) => {
			nodes.push(
				<span key={index} className={cx({ 'checked': selectedItem == n.ID})}
					onClick={() => this.handleViewChange(n.ID)}>
					{n.label}
				</span>
			);
			// it's not the last one!!!
			if (index != items.length - 1) {
				nodes.push(<span key={index + 0.1} className='spliter'></span>)
			};

			return nodes;
		}, []);

		return (
			<div style={{fontSize: 0}}>
				<div className={Level3NavigatorStyle.lv3Navigator}>
					{nodes}
				</div>
			</div>
		);
	}
}